<template>
  <div class="admin-lunbotu">
    <div class="my-admin-header">
      <div class="left">
        <h1 class="title">
          <i class="el-icon-collection-tag"></i>
          首页轮播图管理
        </h1>
      </div>
    </div>
    <div class="my-admin-content">
      <div class="top">
        <ElButton type="primary" size="mini" @click="add()">
          <i class="el-icon-plus"></i>新增轮播图
        </ElButton>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="src" label="图片" width="180">
          <template slot-scope="scope">
            <div class="cover-photo">
              <!-- <img :src="scope.row.photo||'../img/gan.png'" alt="头像"> -->
              <!-- <my-photo
                :photo="scope.row.photo"
                :userName="scope.row.userName"
                line-height="40px"
                font-size="40px"
              ></my-photo>-->
              <img :src="baseUrl+scope.row.src" alt>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="跳转链接" width="180"></el-table-column>
        <el-table-column prop="remark" label="备注" width="180"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="edit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--  <div class="pagination">
        <ElPagination :total="totalRow" :current-page.sync="pageNumber" :page-size="8" background></ElPagination>
      </div>-->
    </div>

    <el-dialog title="操作" :visible.sync="isVisible" :center="true">
      <div class="form-container">
        <el-form label-width="100px">
          <el-form-item label="图片" prop="src">
            <el-upload
              class="avatar-uploader"
              :action="baseUploadPath+'uploadImg'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.src" :src="baseUrl+form.src" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="图片跳转URL" prop="url">
            <ElInput v-model="form.url" placeholder="请输入点击图片跳转链接"></ElInput>
          </el-form-item>
          <el-form-item label="备注">
            <ElInput v-model="form.remark" placeholder="请输入备注"></ElInput>
          </el-form-item>
          <el-form-item label>
            <el-button type="primary" @click="submit()">提交</el-button>
            <el-button type>重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "admin-lunbotu",
  data: function() {
    return {
      tableData: [],
      isVisible: false,
      form: {
        src: "",
        remark: "",
        url: ""
      },
      action: "add",
      baseUrl: this.GLOBAL.baseFilePath,
      baseUploadPath: this.GLOBAL.baseUploadPath
    };
  },
  methods: {
    getLunbotuList() {
      this.axios.post("lunbotu/list").then(res => {
        this.tableData = res.data.list;
      });
    },
    add() {
      this.action = "add";
      this.isVisible = true;
    },
    edit(row) {
      this.action = "update";
      this.isVisible = true;
      this.axios.post("lunbotu/getLunbotuById", { id: row.id }).then(res => {
        this.form = res.data.lunbotu;
      });
    },
    submit() {
      this.axios.post("lunbotu/" + this.action, this.form).then(res => {
        if (res.data.success) {
          this.$message.success("操作成功!");
          this.getLunbotuList();
          this.isVisible = false;
          this.form = {
            id: null,
            src: "",
            remark: "",
            url: ""
          };
        }
      });
    },
    //删除
    del(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.axios
            .post("lunbotu/del", {
              id: row.id
            })
            .then(res => {
              if (res.data.success) {
                this.$message({
                  type: "success",
                  message: "操作成功!"
                });
                this.getLunbotuList();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //图片上传成功之后回调
    handleAvatarSuccess(res, file) {
      this.form.src = res.src;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPng = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPng) {
        this.$message.error("上传头像图片只能是 JPG/png 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return (isJPG || isPng) && isLt2M;
    }
  },
  mounted() {
    this.getLunbotuList();
  }
};
</script>

<style lang="scss" scoped>
.top {
  margin: 10px 0 15px 0;
}
/* .form-container{
    text-align: center;
} */
.cover-photo {
  img {
    height: 100%;
    width: 100%;
  }
  height: 60px;
  width: 80px;
}
</style>